<template>
  <el-container class="main_con">
    <!-- <div class="order_steps">
      <el-steps :active="active" align-center>
        <el-step title="买家下单" description="2020-10-27 17:00:01"></el-step>
        <el-step title="买家付款" description="2020-10-27 17:00:01"></el-step>
        <el-step title="商家发货" description="2020-10-27 17:00:01"></el-step>
        <el-step title="订单完成" description="2020-10-27 17:00:01"></el-step>
      </el-steps>
    </div> -->
    <div class="orderdetail">
      <!-- <span class="title">订单详情</span> -->
      <div class="order_content" style="margin-top:0px">
        <!-- <i></i> -->
        <!-- <div class="status_text"> -->
        <span>订单状态:</span>
        <span style="font-weight: bold">{{ (obj.status == '待发货') & (obj.order_type == 2) ? '待核销' : obj.status }}</span>
        <!-- </div> -->
      </div>

      <div class="order_content">
        <div class="conetnt_a">
          <div class="content_c bor">
            <div class="order_title"><span class="order_title_text">订单信息</span></div>
            <div class="line">
              <div class="lb">
                <div class="label">订单编号:</div>
                <div class="txt">{{ obj.order_no }}</div>
              </div>
            </div>
            <div class="line">
              <div class="lb">
                <div class="label">支付流水号:</div>
                <div class="txt">{{ obj.pay_no }}</div>
              </div>
            </div>
            <div class="line">
              <div class="lb">
                <div class="label">内部单号:</div>
                <div class="txt">{{ obj.unified_order_no }}</div>
              </div>
            </div>

            <div class="line">
              <div class="lb">
                <div class="label">付款方式:</div>
                <div class="txt">{{ obj.pay_id }}</div>
              </div>
            </div>
            <div class="line" v-if="obj.user">
              <div class="lb">
                <div class="label">买家:</div>
                <div class="txt">
                  <el-button size="medium" type="text" @click="showUser">{{ obj.user.nickname }}</el-button>
                </div>
              </div>
            </div>
            <div class="line">
              <div class="lb">
                <div class="label">配送方式:</div>
                <div class="txt" v-if="obj.order_type == 1">快递</div>
                <div class="txt" v-else-if="obj.order_type == 2">自提</div>
                <div class="txt" v-else-if="obj.order_type == 3">同城</div>
              </div>
            </div>
            <div class="line" v-if="obj.order_type != 1">
              <div class="lb">
                <div class="label">{{ obj.order_type == 2 ? '自提时间:' : '配送时间:' }}</div>
                <div class="txt">{{ obj.delivery_time }}</div>
              </div>
            </div>
          </div>
          <div class="content_c">
            <div class="order_title"><span class="order_title_text">发货信息</span></div>
            <div class="line">
              <div class="lb">
                <div class="label">来源:</div>
                <div class="txt">
                  <i title="微信小程序" v-if="obj.source == 1" class="weixin el-sc-xiaochengxu"></i>
                  <i title="微信公众号" v-if="obj.source == 2" class="weixin el-sc-weixin4"></i>
                  <i title="H5" v-if="obj.source == 3" class="weixin el-sc-h5"></i>

                  <!-- <i class="weixin el-sc-weixin4"></i> -->
                </div>
              </div>
            </div>
            <div class="line">
              <div class="lb">
                <div class="label">收货人:</div>
                <div class="txt">
                  {{ obj.consignee }}
                  <el-button type="text" v-if="obj.status == '待支付' || obj.status == '待发货'" @click="changeAddress"><i class="el-icon-edit"></i></el-button>
                </div>
              </div>
            </div>
            <div class="line">
              <div class="lb">
                <div class="label">联系号码:</div>
                <div class="txt">{{ obj.iphone }}</div>
              </div>
            </div>
            <div class="line">
              <div class="lb">
                <div class="label">收货地址:</div>
                <div class="txt">{{ obj.address }}</div>
              </div>
            </div>
            <!-- <div class="line">
    <div class="lb">
      <div class="label">物流单号</div>
      <div class="txt">{{obj.freight ? obj.freight : '-'}}</div>
    </div>
  </div> -->
            <div class="line">
              <div class="lb">
                <div class="label">买家备注:</div>
                <div class="txt">{{ obj.remake }}</div>
              </div>
            </div>
          </div>
        </div>
        <el-divider></el-divider>
        <div class="buttons">
          <!--    <el-button v-has type="primary" v-if="obj.order_type == 1 && (obj.status == '待发货' || obj.status == '部分发货')" size="medium" @click="toExpress" style="margin-right: 10px">
            确认发货
          </el-button> -->
          <!-- <el-button size="medium" v-if="obj.status == '待发货'" style="margin-right:10px">退款</el-button> -->
          <el-button v-if="jur_addons[14] && obj.order_type == 1" size="medium" style="margin-right: 10px" @click="toprint(obj.order_no)">电子面单</el-button>
          <el-button v-if="jur_addons[14] && obj.order_type == 1" size="medium" style="margin-right: 10px" @click="toprint(obj.order_no)">发货单</el-button>
          <el-button v-if="jur_addons[10]" size="medium" style="margin-right: 10px" @click="printReceipt(obj.id)">小票</el-button>
          <el-button v-has type="primary" v-if="obj.status == '待支付' && login_type_url != 'shop'" @click="changeState(obj.id)">确认付款</el-button>
          <el-button v-has type="primary" v-if="obj.status == '待支付'" @click="editMoneyShow(obj.id)">商品改价</el-button>

          <el-button v-has type="primary" v-if="obj.status == '待支付'" @click="orderClose(obj.id)">关闭订单</el-button>
          <el-button v-has="'refund'" type="primary" v-if="obj.status == '待发货' || obj.status == '待核销'" @click="orderdrawback(obj.id)">退款</el-button>
          <el-button v-has="'deliver'" type="primary" v-if="(obj.status == '待发货' || obj.status == '部分发货') && obj.order_type == 1" @click="toExpress(obj)">
            确认发货
          </el-button>
          <el-button v-has="'deliver'" type="primary" v-if="(obj.status == '待发货' || obj.status == '部分发货') && obj.order_type == 3" @click="toExpress(obj, 1)">
            确认发货
          </el-button>
          <el-button v-has="'deliver'" type="primary" v-if="(obj.status == '待支付' || obj.status == '待发货') && obj.order_type == 1" @click="changeAddress(obj)">
            修改收货信息
          </el-button>
          <el-button
            v-has="'deliver'"
            type="primary"
            v-if="obj.orderCommoditys && obj.orderCommoditys.findIndex(_ => _.status == '已发货') > -1 && obj.order_type == 1 && login_type_url != 'shop'"
            @click="cancalExpress(obj.id, 0)"
          >
            取消发货
          </el-button>
          <el-button
            v-has="'deliver'"
            type="primary"
            v-if="obj.orderCommoditys && obj.orderCommoditys.findIndex(_ => _.status == '已发货') > -1 && obj.order_type == 3 && login_type_url != 'shop'"
            @click="cancalExpress(obj.id, 1)"
          >
            取消发货
          </el-button>

          <!--  <el-button  type="text" >打印小票</el-button>
            <el-button  type="text" >发货单</el-button>
            <el-button v-if="item.order_type==1" type="text" >电子面单</el-button> -->
        </div>
      </div>
      <div class="order_content">
        <el-tabs v-model="activeName">
          <el-tab-pane label="商品信息" name="commodity">
            <div class="order_items">
              <div class="list">
                <el-table :data="obj.orderCommoditys">
                  <el-table-column label="订单商品">
                    <template slot-scope="scope">
                      <div class="pro">
                        <div class="img"><vimage style="width: 80px; height: 80px" :src="scope.row.master" fit="fit"></vimage></div>
                        <div class="txt">
                          <div class="name">{{ scope.row.name }}</div>
                          <div class="class">{{ scope.row.pvs_value_new }}</div>
                          <el-popover
                            placement="top-start"
                            title="附加规格
                           "
                            width="400"
                            trigger="hover"
                          >
                            <el-table :data="scope.row.attachlist">
                              <el-table-column property="attach_value" label="附加"></el-table-column>
                              <el-table-column property="num" label="数量"></el-table-column>
                              <el-table-column property="attach_price" label="单价"></el-table-column>
                            </el-table>
                            <!--  <el-button >hover 激活</el-button> -->
                            <div slot="reference" v-if="scope.row.attachlist && scope.row.attachlist.length > 0">
                              附加x{{ scope.row.attachlist.length }},共￥{{ scope.row.attach_pirce }}
                            </div>
                          </el-popover>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="价格">
                    <template slot-scope="scope">
                      ￥{{ scope.row.sell_price }}
                    </template>
                  </el-table-column>
                  <el-table-column label="数量">
                    <template slot-scope="scope">
                      X{{ scope.row.count }}
                    </template>
                  </el-table-column>
                  <el-table-column label="小计">
                    <template slot-scope="scope">
                      ￥{{ scope.row.countPrice }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="status" label="状态"></el-table-column>
                  <el-table-column label="物流单号">
                    <template slot-scope="scope">
                      {{ scope.row.express_company }} - {{ scope.row.logistics_no }}
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="total">
                <div class="count">
                  <div class="line">
                    <div class="label">商品小计</div>
                    <div class="money">￥{{ orderItemCountPrice }}</div>
                  </div>
                  <div class="line">
                    <div class="label">运费</div>
                    <div class="money">￥{{ obj.freight ? obj.freight : '0.00' }}</div>
                  </div>
                  <div class="line">
                    <div class="label">优惠抵扣</div>
                    <div class="money red">-￥{{ obj.discount || 0.0 }}</div>
                  </div>

                  <div class="line">
                    <div class="label">积分抵扣</div>
                    <div class="money red">-￥{{ obj.discount_amount || 0.0 }}</div>
                  </div>
                  <div class="line">
                    <div class="label">会员折扣</div>
                    <div class="money red">-￥{{ obj.discount_level_money || 0.0 }}</div>
                  </div>
                  <div class="line">
                    <div class="label">实付款</div>
                    <div class="money red bold">￥{{ obj.allprice }}</div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="表单信息" name="form" v-has="23">
            <div v-for="(item, i) in formlist" :key="i">
              <div class="order_title">
                <span class="order_title_text">{{ item.source == 0 ? '下单表单' : '商品表单' }}</span>
              </div>
              <div class="line" v-for="(data, index) in item.answer" :key="indedx">
                <div class="lb">
                  <div class="label">{{ data.title }}:</div>
                  <div class="txt" v-if="data.type == 'img'"><img style="width: 60px;" v-for="(img, c) in data.value" :key="c" :src="img" /></div>
                  <div class="txt" v-else>{{ data.value }}</div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <el-dialog title="确认发货" destroy-on-close :visible.sync="showExpress" width="70%">
      <orderExpress :key="rk" :order="orderExpObj" @success="closeExpress"></orderExpress>
    </el-dialog>
    <el-dialog title="修改收货地址" destroy-on-close :visible.sync="showAddress" width="40%">
      <orderAddress :order="orderAddressObj" @success="closeAddress"></orderAddress>
    </el-dialog>
    <el-dialog title="确认发货" destroy-on-close :visible.sync="showLocal" width="70%"><orderLocal :order="orderExpObj" @success="closeLocal" :key="dk"></orderLocal></el-dialog>
    <el-dialog title="取消发货" destroy-on-close :visible.sync="showCancel" width="50%">
      <orderExpressCancel ref="cancelComponent" @success="cancelSuccess"></orderExpressCancel>
    </el-dialog>
    <el-dialog title="取消发货" destroy-on-close :visible.sync="showCancellocal">
      <orderLocalCancal ref="LocalcancelComponent" @success="cancelSuccess"></orderLocalCancal>
    </el-dialog>
    <el-dialog title="打印小票" :visible.sync="showPrintReceipt" width="30%" @close="clearDataRec" destroy-on-close>
      <div class="psoRec_item">
        <div class="label">选择模板：</div>
        <div class="content">
          <el-select size="medium" v-model="psoRec.template_id" placeholder="请选择模板">
            <el-option v-for="item in templateRecList" :key="item.id" :label="item.default ? item.name + '(默认)' : item.name" :value="item.id"></el-option>
          </el-select>
        </div>
      </div>

      <div class="psoRec_item">
        <div class="label">选择打印机：</div>
        <div class="content">
          <el-select size="medium" v-model="psoRec.printer_id" placeholder="请选择模板">
            <el-option v-for="item in templateList" :key="item.id" :label="item.default ? item.name + '(默认)' : item.name" :value="item.id"></el-option>
          </el-select>
        </div>
      </div>
      <el-button type="primary" size="medium" style="margin-left: 15px" @click="printRecFun">打印数据</el-button>
    </el-dialog>
    <el-dialog title="商品改价" destroy-on-close :visible.sync="showMoneyEdit" width="30%">
      <changeMoney ref="orderMoneyEditComponent" @success="editMoneyClose"></changeMoney>
    </el-dialog>
  </el-container>
</template>

<script>
import orderExpress from './components/orderExpress';
import orderAddress from './components/orderAddress';
import orderLocal from './components/orderLocal';
import orderExpressCancel from './components/orderExpressCancel';
import orderLocalCancal from './components/orderLocalCancal';
import {getOrder, orderState, orderClose, orderdrawback} from '@/api/shop/order';
import {createReceipt, getReceiptTemplateList, getReceiptPrinterList} from '@/api/shop/print';
import {answerdetail} from '@/api/mall/systemform';
import {getToken, getShopToken, logintype_byurl} from '@/utils/auth';
import changeMoney from './components/changeMoney';

export default {
  data() {
    return {
      showMoneyEdit: false,
      rk: 1,
      showExpress: false,
      orderExpObj: {},
      showAddress: false,
      showLocal: false,
      showCancel: false,
      showCancellocal: false,
      dk: 1,
      orderAddressObj: {},
      isLoading: false,
      active: 1,
      orderItemCountPrice: '0.00',
      obj: {},
      showPrintReceipt: false,
      templateRecList: [],
      templateList: [],
      psoRec: {
        order_id: [],
        printer_id: '',
        template_id: ''
      },
      jur_addons: {},
      login_type_url: '',
      activeName: 'commodity',
      formlist: []
    };
  },
  components: {
    orderExpress,
    orderAddress,
    orderLocal,
    orderExpressCancel,
    orderLocalCancal,
    changeMoney
  },
  created() {
    if (this.$route.query.id) {
      //查看详情
      this.getOrder(this.$route.query.id);
    } else {
      //无参数,禁止进入该页面
      this.$router.back(-1);
    }
  },
  mounted() {
    this.login_type_url = logintype_byurl();
    this.$jur_addons([10, 14, 23]).then(a => {
      this.jur_addons = a;
      if (a[14] || a[10]) {
        this.getTemplateList();
        this.getTemplateRecList();
      }
      if (a[23]) {
        this.answerdetail(this.$route.query.id);
      }
    });

    //this.searchList();
  },
  methods: {
    //显示变更余额
    editMoneyShow(id) {
      this.showMoneyEdit = true;
      this.$nextTick(_ => {
        this.$refs.orderMoneyEditComponent.init(id);
      });
    },
    //关闭变更余额回调
    editMoneyClose() {
      //重新加载数据
      this.showMoneyEdit = false;
      this.getDataList();
    },
    //获取所有打印模板(小票)
    getTemplateRecList() {
      getReceiptTemplateList()
        .then(res => {
          this.templateRecList = res.msg;
        })
        .catch(e => {
          //empty
        });
    },
    //获取所有打印模板
    getTemplateList() {
      getReceiptPrinterList()
        .then(res => {
          this.templateList = res.msg;
        })
        .catch(e => {
          //empty
        });
    },
    printReceipt(id) {
      let order_id = [];
      order_id.push(id);
      this.psoRec.order_id = order_id;
      this.showPrintReceipt = true;
    },
    //打印小票关闭自动清空模板选择数据
    clearDataRec() {
      this.psoRec.template_id = '';
      this.psoRec.printer_id = '';
    },
    //打印小票
    printRecFun() {
      if (this.psoRec.template_id && this.psoRec.printer_id) {
        createReceipt(this.psoRec)
          .then(res => {
            this.$message({
              message: '操作完毕,请等待打印结果',
              type: 'success'
            });
            this.showPrintReceipt = false;
          })
          .catch(e => {
            //empty
          });
      } else {
        this.$alert('请先选择打印模板与打印机');
        return false;
      }
    },
    //打印面单
    toprint(order_no) {
      let routeUrl = this.$router.resolve({
        path: '/print/list',
        query: {order_no: order_no}
      });
      window.open(routeUrl.href, '_blank');
    },
    //查看用户详情
    showUser() {
      console.log('显示用户详情');
    },
    //获取订单详情数据
    getOrder(id) {
      this.isLoading = true;
      getOrder(id)
        .then(res => {
          this.isLoading = false;
          let o = res.msg;
          let x = 0;
          if (o.order_type == 3) {
            o.money = Number(o.money) - Number(o.distribution_fee);
            o.freight = o.distribution_fee.toFixed(2);
          }
          o.orderCommoditys.forEach(e => {
            //转换处理SKU数据->红+L+大
            if (e.pvs_value) {
              let l = e.pvs_value.split(','),
                s = '';
              l.forEach(k => {
                s += k.split(':')[1] + '+';
              });
              s = s.substring(0, s.length - 1);
              e.pvs_value_new = s;
            }
            //处理小计数据
            e.countPrice = (e.sell_price * e.count).toFixed(2);
            x += e.sell_price * e.count;
            if (o.order_type == 2 && e.status == '待发货') {
              e.status = '待核销';
            }
            if (o.attach && o.attach.length > 0 && e.attach_value && e.attach_value != '') {
              e.attachlist = [];
              e.attach_pirce = 0;

              o.attach.forEach(a => {
                if (e.attach_value.indexOf(a.attach_value) > -1 && e.attachlist.findIndex(_ => _.attach_value == a.attach_value) == -1) {
                  if (e.sku_id) {
                    if (e.sku_id == a.sku_id) {
                      e.attachlist.push(a);
                      e.attach_pirce += Number(a.attach_price) * a.num;
                    }
                  } else {
                    e.attachlist.push(a);
                    e.attach_pirce += Number(a.attach_price) * a.num;
                  }
                }
              });

              x += e.attach_pirce;
              e.attach_pirce = e.attach_pirce.toFixed(2);
              e.countPrice = (Number(e.attach_pirce) + Number(e.countPrice)).toFixed(2);
            }
          });

          this.orderItemCountPrice = x.toFixed(2);
          let allprice = Number(o.money) - Number(o.discount) - Number(o.discount_amount) + Number(o.freight);
          o.allprice = allprice.toFixed(2);
          //this.obj = res.msg;
          this.obj = o;
        })
        .catch(e => {
          this.isLoading = false;
        });
    },
    answerdetail(id) {
      let data = {id: id, n_load: 1};
      answerdetail(data).then(res => {
        this.formlist = res.msg;
      });
    },
    //修改订单状态(临时,测试用,将订单改成'已付款'状态)
    changeState(id) {
      this.$confirm('是否直接修改订单状态为"已支付"?')
        .then(_ => {
          let o = {};
          o.id = id;
          o.status = 2;
          this.isLoading = true;
          orderState(o).then(res => {
            this.isLoading = false;
            this.getOrder(this.$route.query.id);
          });
        })
        .catch({
          //empty
        });
    },
    orderClose(id) {
      this.$confirm('是否要关闭该订单?').then(_ => {
        this.isLoading = true;
        orderClose({id: id})
          .then(res => {
            this.isLoading = false;
            //重新加载数据
            this.getOrder(this.$route.query.id);
          })
          .catch(e => {
            this.isLoading = false;
          });
      });
    },
    orderdrawback(id) {
      this.$confirm('是否直接退款？').then(_ => {
        // this.isLoading = true;
        orderdrawback({oid: id}).then(res => {
          // this.isLoading = false;
          this.getOrder(this.$route.query.id);
        });
      });
    },
    //修改收货信息
    changeAddress(item) {
      //补全不同字段
      this.orderAddressObj = {
        id: this.obj.id,
        address: this.obj.address,
        user_real_name: this.obj.consignee,
        user_mobile: this.obj.iphone,
        status: this.obj.status
      };
      this.showAddress = true;
    },
    //修改收货信息回调
    closeAddress() {
      this.showAddress = false;
      this.getOrder(this.$route.query.id);
    },
    // //确认发货
    // toExpress() {
    //   this.rk++;
    //   this.orderExpObj = {...this.obj};
    //   //补全不同字段
    //   this.orderExpObj.user_real_name = this.obj.consignee;
    //   this.orderExpObj.user_mobile = this.obj.iphone;

    //   this.$set(this.orderExpObj, 'cids', []);
    //   this.$set(this.orderExpObj, 'logistics_no', '');
    //   this.$set(this.orderExpObj, 'express_company', '');

    //   this.showExpress = true;
    // },
    //确认发货
    toExpress(item, type) {
      this.orderExpObj = {...this.obj};
      //补全不同字段
      this.orderExpObj.user_real_name = this.obj.consignee;
      this.orderExpObj.user_mobile = this.obj.iphone;

      if (type) {
        this.showLocal = true;
        this.dk++;
      } else {
        this.rk++;

        this.$set(this.orderExpObj, 'cids', []);
        this.$set(this.orderExpObj, 'logistics_no', '');
        this.$set(this.orderExpObj, 'express_company', '');

        this.showExpress = true;
      }
    },
    //发货回调函数
    closeExpress() {
      this.showExpress = false;
      this.getOrder(this.$route.query.id);
    },
    //发货回调函数
    closeLocal() {
      this.showLocal = false;
      this.getOrder(this.$route.query.id);
    },
    //取消发货
    cancalExpress(id, type) {
      if (type == 0) {
        this.showCancel = true;
        this.$nextTick(_ => {
          this.$refs.cancelComponent.init(id);
        });
      } else {
        this.showCancellocal = true;
        this.$nextTick(_ => {
          this.$refs.LocalcancelComponent.init(id);
        });
      }
    },
    //取消发货回调
    cancelSuccess() {
      this.showCancel = false;
      this.showCancellocal = false;
      this.getOrder(this.$route.query.id);
    }
  }
};
</script>

<style lang="scss" scoped>
.orderdetail {
  // background: #FFFFFF;
  .title {
    font-size: 24px;
    color: #333;
    font-weight: 500;
    padding: 40px;
    display: block;
  }
  .order_title {
    display: flex;
    height: 60px;
    background: #ffffff;
    align-items: center;
    .order_title_text {
      display: flex;
      flex: 1;
      height: 60px;
      line-height: 60px;
      font-size: 16px;
      font-weight: bold;
      color: #333333;
    }
    // display: block;
    // background-color: #FFFFFF;
  }
}
.order_steps {
  background: #fff;
  padding: 40px 100px;
}
.order_status {
  height: 60px;
  // margin: 0 20px;
  background: #ffffff;
  display: flex;
  align-items: center;
  border-radius: 10px;
  padding: 0 40px;
  font-size: 16px;
  font-weight: bold;
  color: #333333;

  // justify-content: center;
  // .status_text{

  //   font-size: 24px;
  //   font-family: PingFang SC;
  //   font-weight: bold;
  //   color: #333333;
  // }
}
.order_content {
  margin-top: 20px;
  background: #fff;
  padding: 20px 0;
  color: #606266;
  font-size: 14px;
  padding: 20px;
  .conetnt_a {
    display: flex;
    .content_c {
      flex: 1;
      padding-left: 20px;
    }
  }
  // display: flex;

  .buttons {
    text-align: right;
    padding-bottom: 20px;
    .el-button {
      // background: #4d6ef2;
      &:hover {
        background: #3455da;
        color: #fff;
      }
    }
  }
  .line {
    display: flex;
    // height: 36px;
    line-height: 36px;
    font-size: 14px;
    .lb {
      display: flex;
      flex-grow: 1;

      .label {
        width: 80px;
        text-align: right;
        flex-shrink: 0;
        margin-right: 5px;
      }

      .txt {
        // display: -webkit-box; /*作为弹性伸缩盒子模型显示*/
        // -webkit-line-clamp: 1; /*显示的行数；如果要设置2行加...则设置为2*/
        // overflow: hidden; /*超出的文本隐藏*/
        // text-overflow: 'ellipsis'; /* 溢出用省略号*/
        // -webkit-box-orient: vertical; /*伸缩盒子的子元素排列：从上到下*/

        .weixin {
          font-size: 18px;
          color: #333333;
        }
      }
    }

    .status {
      display: flex;
      width: 300px;

      .label {
        width: 80px;
        text-align: right;

        &::after {
          content: ('：');
        }
      }

      .txt {
        font-size: 14px;
        font-weight: 700;
      }
    }
  }
}

.order_items {
  margin-top: 20px;
  background: #fff;
  padding: 20px;
  color: #606266;
  font-size: 14px;

  .list {
    .pro {
      display: flex;

      .img {
        width: 80px;
        margin-right: 10px;
      }

      .txt {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-content: space-between;
        .name {
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }

  .total {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;

    .count {
      .line {
        display: flex;
        height: 36px;
        line-height: 36px;

        .label {
          width: 80px;
          text-align: right;
          flex-shrink: 0;

          &::after {
            content: ('：');
          }
        }

        .money {
          font-size: 16px;

          &.red {
            color: #f56c6c;
          }

          &.bold {
            font-weight: bold;
          }
        }
      }
    }
  }
}
.psoRec_item {
  display: flex;
  align-items: center;
  margin-bottom: 22px;

  .label {
    width: 100px;
    text-align: right;
  }

  .content {
    flex-grow: 1;
  }
}
.bor {
  border-right: 1px solid #dcdfe6;
}
</style>
